<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta content="telephone=no" name="format-detection"/>
    <title></title>
    <style>
        *{margin:0;padding:0;}
        header{height:32px;background:blue;}
        .content{
            display:-webkit-box;
            display:-webkit-flex;
            display:-ms-flexbox;
            display:flex;
        }
        .l_item{width:25%}
        .r_menu{width:75%}
        .touch_panel{overflow:hidden;border:1px solid #000;border-left:none;border-right:none;}
        .inner{height:1000px;margin:1px;background:#fff;
            transition: 800ms cubic-bezier(0.1, 0.57, 0.1, 1);
            -webkit-transition: 800ms cubic-bezier(0.1, 0.57, 0.1, 1);
        }

    </style>
</head>
<body>
<header></header>
<div class="content">
    <section class="touch_panel l_item">
        <div class="inner"></div>
    </section>
    <section class="touch_panel r_menu">
        <div class="inner"></div>
    </section>
</div>
</body>
<script>
    var win_h=document.documentElement.clientHeight||document.body.clientHeight;
    var l_item=document.querySelectorAll(".l_item");
    var r_item=document.querySelectorAll(".r_menu");
    var touchItem=document.querySelectorAll('.touch_panel');
    var m_h=win_h-32-2;
    l_item[0].style.cssText="height:"+m_h+"px;background:purple;";
    r_item[0].style.cssText="height:"+m_h+"px;background:orange;";
    var starty= 0;
    var disy= 0,inity=0;
    for(var i =0;i<touchItem.length;i++){
        (function(j){
            if("ontouchstart" in document){
               /* touchItem[j].ontouchstart=function(event){
                    console.log(0)

                };
                touchItem[j].ontouchmove=function(event){
                    console.log(1)
                }*/
                touchItem[j].addEventListener("touchstart",function(event){
//                   inity=this;
                    var touch=event.touches[0];
                    var inity=this.dataset.inity?this.dataset.inity:0;
                    starty=touch.clientY-inity;
                    disableDefault();
                });
                touchItem[j].addEventListener("touchmove",function(event){

                    disy=event.touches[0].clientY-starty;
                    this.children[0].style.cssText='-webkit-transform:translate(0px ,'+disy+'px)';
                    disableDefault();
                });
                touchItem[j].addEventListener("touchend",function(event){
                    this.dataset.inity=disy;
                    starty=0;
                    enableDefault();
                })
            }
        })(i);
    }
    function disableDefault(){
        document.body.removeEventListener('touchmove', preventScroll(event));
    }

    function enableDefault(){
        document.body.removeEventListener('touchmove',preventScroll(event));
    }


   function  preventScroll(event){
       event.preventDefault();
   }
</script>
</html>